<template>
  <div>
    <ul class="row">
      <li><span class="bt">ID</span><span class="content">{{imageInfo.Id}}</span></li>
      <li><span class="bt">大小</span><span class="content">{{Math.round(imageInfo.Size / 1024 / 1024) + 'M'}}</span></li>
      <li><span class="bt">建立时间</span><span class="content">{{imageInfo.Created}}</span></li>
      <li><span class="bt">Build</span><span class="content">Docker {{ imageInfo.DockerVersion }} on {{ imageInfo.Os }} ，{{ imageInfo.Architecture }}</span></li>
      <li><span class="bt">CMD</span><span class="content"><div v-for="item in imageInfo.Config.Cmd" :key="item" class="cmdbg">{{ item }}</div></span></li>
      <li><span class="bt">ENV</span><span class="content">
        <div v-for="item in imageInfo.Config.Env" :key="item" class="envbox">
          <span>{{ item.split('=')[0] }}</span>
          <span>{{ item.split('=')[1] }}</span>
        </div>
      </span></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['imageInfo']
}
</script>

<style lang="scss" scoped>
.row{
  margin: vw(10) 0;
  border-radius: vw(20);
  border: 1px solid #ddd;
  box-shadow: $yinying;
  padding: vw(10);
  li{
    font-size: vw(28);
    line-height: vw(45);
    display: flex;
    .cmdbg{
      background: pink;
      padding: vw(4) vw(6);
      border-radius: vw(4);
      margin: vw(6);
    }
    .envbox{
      font-size: vw(24);
      line-height: vw(40);
      flex: 1;
      overflow: hidden; //超出部分隐藏
      text-overflow: ellipsis; //超出部分显示...
      white-space: nowrap; //文本强制一行显示
      span{
        padding-top: vw(5);
        display: inline-block;
        width: vw(180);
        overflow: hidden; //超出部分隐藏
        text-overflow: ellipsis; //超出部分显示...
        white-space: nowrap; //文本强制一行显示
        &:nth-child(2){
          width: vw(310);
          margin-left: vw(10);
        }
      }
    }
    .bt{
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: vw(150);
      text-align: center;
      border: 1px solid $color;
      margin: vw(5) 0;
      border-radius: vw(5);
    }
    .content{
      padding: vw(15);
      flex: 1;
      word-break: break-all;
    }
    &:nth-child(2n-1){
      .bt{
        background: #F7FCFF;
      }
    }
    &:nth-child(2n){
      .content{
        background: #F7FCFF;
      }
    }
  }
}
</style>
